<template>
  <div id="main" class="parameterInfor flowCloumn h100">
    <div class="constentBttom flowWrap tab-switch h100">
    <div class="treeDiv class-tree">
      <edit-tree
        ref="tree"
        :treeSetting="treeSetting"
        :hideBtn="hideBtn"
        type="normal"
        @handleClickTree="handleClickTree"
        :filterNode="filterNode"
      />
    </div>
    <div class="draggingBtn">
        <widthResize></widthResize>
      </div>
    <div class="constentmain tableDiv table-list">
      <div class="h100" v-show="showTable">
        <list-table-new ref="listTable" v-bind="tableConfig"></list-table-new>
      </div>
      <editUserPage
        v-if="!showTable"
        @goBackPage="goBackPage"
        @getNewest="getNewest"
        ref="editPage"
        :editFormData="userInfo"
        :orgId="orgCode"
      />
    </div>
    </div>
    <dialogPublic
      :title="title"
      :show.sync="show"
      v-if="show"
      @doSubmit="doSubmit"
      @doClose="() => (show = false)"
    >
      <div class="input">
        <div class="select">
          <div>
            <label>应用名称</label>
            <el-select
              style="width: 120px"
              size="mini"
              v-model="appId"
              placeholder="请选择"
              @change="selectChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="character">
            当前用户：
            <div class="name">{{ userName }}</div>
          </div>
        </div>
        <div class="transter">
          <el-transfer
            filterable
            :filter-method="filterMethod"
            filter-placeholder="请输入搜索内容"
            :titles="['未选角色', '已选角色']"
            v-model="value"
            :data="data"
          >
          </el-transfer>
        </div>
      </div>
    </dialogPublic>
  </div>
</template>

<script>
import {
  getUserDataByOrg,
  deleteMultipleUser,
  queryUserRole,
  saveUserRole,
} from "@/api/systemManagement/userManagement.js";
import { orgTreeData } from "@/api/systemManagement/orgnizationManagement.js";
import { applicationQueryList } from "@/api/systemManagement/applicationManagement.js";
import { queryOrgList } from "@/api/systemManagement/authManagement.js";
import editUserPage from "./editUserPage.vue";
export default {
  components: { editUserPage },
  data() {
    return {
      showTable: true,
      title: "分配角色",
      show: false,
      orgCode: "",
      treeSetting: {
        title: "设备资产管理系统",
        data: [],
        defaultProps: {
          children: "children",
          label: "name",
        },
      },
      hideBtn: true,
      //表格数据配置
      tableConfig: {
        showAllSearch: true,
        showIndex: true,
        selectionShow: true,
        showFilterBtn: false,
        showCustomBtn: false,
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          searchArr: [
            {
              type: "input",
              label: "用户名称",
              model: "name",
              placeholder: "请输入",
            },
          ],
          queryData: {
            page: 1,
            pageSize: 15,
          },
        },
        tableMethods: {
          rowClick: (e) => {},
        },
        actionList: [
          {
            name: "新增",
            icon: "icon-xinjian",
            disabled: !this.$store.getters.isBtnAuth("add"),
            content: "未授权此功能！",
            method: (index, row) => {
              this.goDetailPage(row, "/addUserPage");
            },
          },
          {
            name: "删除",
            icon: "icon-shanchu",
            disabled: !this.$store.getters.isBtnAuth("delete"),
            content: "未授权此功能！",
            method: (index, row) => {
              this.delete(row);
            },
          },
        ],
        column: [
          {
            label: "用户名",
            //textAlign: "center",
            prop: "name",
          },
          {
            label: "账号",
            //textAlign: "center",
            prop: "account",
          },
          {
            label: "组织",
            //textAlign: "center",
            prop: "orgName",
            formatter: (row) => {
              if (row.orgVoList) {
                return row.orgVoList
                  .map((item) => {
                    return item.name;
                  })
                  .join(", ");
              } else {
                return "-";
              }
            },
          },
          {
            label: "岗位",
            //textAlign: "center",
            prop: "orgName",
            showTooltip: true,
            formatter: (row) => {
              if (row.postUserVoList) {
                return row.postUserVoList
                  .map((item) => {
                    return item.postName;
                  })
                  .join(", ");
              } else {
                return "-";
              }
            },
          },
          {
            label: "操作",
            //textAlign: "center",
            type: "button",
            buttonArr: [
              {
                text: "编辑",
                isShow: () => {
                  // return this.$store.getters.isBtnAuth("edit");
                  return true;
                },
                methods: (row, index) => {
                  this.userInfo = row;
                  this.showTable = false;
                },
              },
              {
                text: "分配角色",
                isShow: () => {
                  // return this.$store.getters.isBtnAuth("assignRole");
                  return true;
                },
                methods: (row, index) => {
                  this.userName = row.name;
                  this.userAccount = row.account;
                  this.appId = "";
                  this.data = [];
                  this.value = [];
                  this.getUserCharacter(row.account);
                  this.show = true;
                },
              },
            ],
          },
        ],
        tableData: [],
        paginationObj: {
          pageSizes: [15, 30, 50, 100],
        },
        totalNumber: 0,
      },
      data: [],
      value: [],
      userName: "",
      userAccount: "",
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1;
      },
      options: [],
      appId: "",
      userInfo: {},
      disabledList: [],
    };
  },
  created() {
    this.getSelectData();
  },
  mounted() {
    this.getTreeData();
  },
  methods: {
    //筛选树
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //跳转到详情页
    goDetailPage(row, router) {
      const { href } = this.$router.resolve({
        path: router,
        query: {
          id: row ? row.orgId : "",
          orgId: this.orgCode,
        },
      });
      window.open(href, "_blank");
    },
    //获取表格数据
    getTableData(params, sortStr) {
      let queryData = Object.assign({}, params);
      if (sortStr.length > 0) {
        queryData.orders = sortStr;
      }
      queryData.orgId = this.orgCode;
      queryData.isStsFlag = true;
      getUserDataByOrg(queryData).then((res) => {
        this.$set(this.tableConfig, "tableData", res.data);
        this.$set(this.tableConfig, "totalNumber", res.total);
      });
    },
    //点击树
    handleClickTree(node) {
      this.orgCode = node.id;
      this.$refs.listTable.searchData();
      this.showTable = true;
    },
    //获取组织树数据
    getTreeData() {
      //得到组织树的数据
      let form = {
        PermissionAllapp:true
      }
      orgTreeData(form).then((res) => {
        if (res.code == 200 && res.data.length > 0) {
          this.$set(this.treeSetting, "data", res.data);
          this.$refs.listTable.searchData();
        }
      });
    },
    //批量删除用户
    delete() {
      let arr = this.$refs.listTable.getSelectData();
      let ids = [];
      if (arr.length != 0) {
        this.$confirm("确定要删除选中用户吗", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            arr.forEach((item) => {
              ids.push(item.id);
            });
            deleteMultipleUser({ orgId: this.orgCode, ids: ids.join() }).then(
              (res) => {
                if (res.code === 200) {
                  this.$message.success(res.description);
                  this.$refs.listTable.searchData();
                }
              },
              (error) => {
                this.$message.error(error);
              }
            );
          })
          .catch((e) => {});
      } else {
        this.$message.warning("请至少勾选一条数据");
      }
    },
    //切换应用下拉框
    selectChange(val) {
      this.appId = val;
      this.getCharacterData(val);
    },
    //获取应用下拉框数据
    getSelectData() {
      applicationQueryList().then(
        (res) => {
          let arr = res.data.map((item) => {
            const obj = {
              label: item.name,
              value: item.id,
            };
            return obj;
          });
          this.options = arr;
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //获取所有角色信息
    getCharacterData(id) {
      const queryData = {
        appid: id,
        pageSize:1000,
        page:1
      };
      queryOrgList(queryData).then(
        (res) => {
          if (res.data.length != 0) {
            this.data = res.data.map((item) => {
              const obj = {
                label: this.disabledList.includes(item.id)
                  ? `${item.name}(所属组织角色)`
                  : item.name,
                key: item.id,
                disabled: this.disabledList.includes(item.id) ? true : false,
              };
              return obj;
            });
          } else {
            this.data = [];
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //查询用户拥有角色
    getUserCharacter(account) {
      this.disabledList.length = 0;
      queryUserRole({ account: account }).then(
        (res) => {
          if (res.data.length != 0) {
            this.value = res.data.map((item) => {
              if (item.isOrgRole) {
                this.disabledList.push(item.id);
              }
              return item.id;
            });
          } else {
            this.value = [];
          }
          this.getCharacterData();
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //提交分配角色
    doSubmit() {
      const params = {
        account: this.userAccount,
      };
      let data = this.value;
      saveUserRole(params, data).then(
        (res) => {
          this.$message.success(res.description);
          this.show = false;
          this.appId = "";
          this.data = [];
          this.value = [];
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //获取最新数据
    getNewest() {
      this.showTable = true;
      this.$refs.listTable.searchData();
    },
    //返回
    goBackPage() {
      this.showTable = true;
    },
  },
};
</script>



<style lang="less" scoped>
#main {
  width: 100%;
  height: 100%;
  //display: flex;
  .class-tree {
    height: 100%;
    width: 300px;
    border-right: 10px solid #f2f3f8;
  }
  .table-list {
    height: 100%;
    width: calc(100% - 300px);
    padding: 20px;
    //border-left: 10px solid #f2f3f8;
    flex: 1;
    overflow: auto;
  }
  .input {
    width: 100%;
    margin-bottom: 20px;
    .select {
      width: 100%;
      height: 50px;
      display: flex;
      margin: 0px 0px 20px 0px;
      padding-left: 10px;
      text-align: left;
      label {
        margin: 0 10px;
      }
      .character {
        left: 150px;
        top: 60px;
        font-size: 15px;
        .name {
          display: inline-block;
          border: 1px solid red;
          text-align: center;
          padding: 4px;
          font-size: 12px;
          color: red;
        }
      }
    }
    .transter {
      width: 100%;
      height: 400px;
      /deep/ .el-transfer {
        width: 100%;
        height: 100%;
        text-align: center;
        .el-transfer-panel {
          width: 36%;
          height: 400px;
          text-align: left;
          .el-transfer-panel__list.is-filterable {
            height: 298px;
          }
        }
        .el-transfer-buttons {
          width: 28%;
        }
      }
    }
  }
}
.parameterInfor {
  .constentmain {
    margin-left: 15px;
  }
  /deep/.el-tabs__content {
    height: calc(100% - 50px);
  }
  /deep/.el-tab-pane {
    height: 100%;
  }
}
.flowCloumn {
  display: flex;
  flex-flow: column nowrap;
}
.flowWrap {
  display: flex;
  flex-flow: wrap nowrap;
}
.el-tabs--border-card {
  box-shadow: none;
}
</style>
